<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 1000px;
				height:700px;
				margin: 0 auto;
			}
			input{
				width: 800px;
			}
			textarea{
				width: 800px;
				height: 250px;
				float: left;
			}
			#spa{
				float: left;
			}
			#div1{
				width: 100%;
				height: 40px;
				margin-top:40px ;
				float: left;
			}
			.span2{
				position: absolute;
				top: 380px;left: 365px;
			}
			.buttn{
				position: absolute;
				left: 350px;top: 455px;
			}
			table{
				margin-top: 380px;
				width: 1000px;
				text-align: center;
			}
			.td1{
				width: 15%;
			}
			.td2{
				width: 55%;
			}
			.td3{
				width: 20%;
			}
			.td4{
				width: 10%;
			}
			.span1{
				color: red;
				font-size: 10px;
				float: left;
			}
			.fd1{
				float: left;
			}
			.span2{
				color: red;
				font-size: 10px;
				margin: 2px ;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<h1>1.产品建议</h1>
			<p style="background: skyblue;color: darkblue;height: 30px;line-height: 30px;">您好，欢迎您给我们提产品的感受和建议</p>
			标题：<input placeholder="请输入标题" type="" name="" id="" value="" /><span style="position: relative;top: 0px;left: 0px;" class="span2"></span>
			<br>
			<br>
			<br>
				
			<span id="spa">
				内容：
			</span><textarea rows="20" cols="20">请发表您的建议或感受</textarea>
			<span class="span1"></span>
			<div id="div1">
				<span class="fd1">电话：</span><input placeholder="请输入手机号,方便我们联系您" class="fd1"  type="" name="" id="" value="" /><span class="span1"></span>
			</div>
			<button class="buttn" type="button">发表</button>
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<td class="td1">标题</td>
					<td class="td2">内容</td>
					<td class="td3">联系</td>
					<td class="td4">操作</td>
				</tr>
				<tr>
					<td class="td1">体验感</td>
					<td class="td2">用户体验不好，过多繁琐的操作</td>
					<td class="td3">18888888888</td>
					<td class="td4"><a href="#">删除</a></td>
				</tr>
				<tr>
					<td class="td1">产品种类繁多</td>
					<td class="td2">我要玩亚索</td>
					<td class="td3">18888888888</td>
					<td class="td4"><a href="#">删除</a></td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var data = new Date();
			data.setDate(data.getDate()+10)
			var span =document.getElementsByTagName("span");
			var btn=document.getElementsByTagName("button");
			var texta=document.getElementsByTagName("textarea")[0];
			var inp=document.getElementsByTagName("input");
			var att=/^[1]\d{10}$/;
			console.log(inp[0].value.length,inp[1].value.length,texta.value.length)
			var tab=document.getElementsByTagName("table")[0];
			texta.onfocus=function(){
				texta.value=""
			}
			btn[0].onclick=function(){
				for(var i=0;i<1;i++){
					
					if(inp[0].value.length<4){
						inp[0].value="";
						span[0].innerHTML="*请输入4-30个字符";
						
					}else{
						span[0].innerHTML="";
					}
					if(texta.value.length<15){
						texta.value="";
						span[2].innerHTML="*请输入15-1000个字符";
					}else{
						span[2].innerHTML=""
					}
					if(!att.test(inp[1].value)==true){  //手机号码总感觉还能继续判断,就是想不出来;
						inp[1].value=""
						span[4].innerHTML="*请输入正确手机号";
					}else{
						span[4].innerHTML=""
					}
					if((inp[0].value.length>=4&&inp[0].value.length<=30) && (texta.value.length>=15&&texta.value.length<=1000)&&(inp[1].value.length == 11)){
					var tr=document.createElement("tr");
					var td1=document.createElement("td");
					var td2=document.createElement("td");
					var td3=document.createElement("td");
					var td4=document.createElement("td");
					console.log(texta.innerHTML.length)
					tr.appendChild(td1);
					td1.innerHTML=inp[i].value
					tr.appendChild(td2);
					td2.innerHTML=texta.value
					tr.appendChild(td3);
					td3.innerHTML=inp[1].value
					tr.appendChild(td4);
					td4.innerHTML="<a href='#'>删除</a>"
					tab.appendChild(tr);
					}
				}
				del()
				
				
						
					
				
				
				
				                   
			}
			del()
			function del(){
				var qi = document.getElementsByTagName("a")
				for(var i=0;i<qi.length;i++){
					qi[i].onclick = function(){
						this.parentNode.parentNode.remove()
					}
				}
			}
		</script>
		<script src="cookie.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>